<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<p:panel>
		<h:form id="documentsform">
			<p:panelGrid columns="2" styleClass="align_top">

				<p:dataTable id="documents" value="#{documents.documents}"
					var="document" selection="#{documents.document}"
					selectionMode="single" rowKey="#{document.id}" paginator="true"
					rows="10" lazy="true">
					<!-- <p:ajax event="rowSelect" listener="#{documents.onRowSelect}"/> -->
					<f:facet name="header">  
			            Listado de Archivos 
			        </f:facet>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Nombre" />
						</f:facet>
						<h:outputText value="#{document.name}" />
					</p:column>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Type" />
						</f:facet>
						<h:outputText value="#{document.sourceType}" />
					</p:column>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Source" />
						</f:facet>
						<h:outputText value="#{document.source}" />
					</p:column>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Fecha de Publicacion" />
						</f:facet>
						<h:outputText value="#{document.publishedDate}" />
					</p:column>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Fecha de Descarga" />
						</f:facet>
						<h:outputText value="#{document.downloadDate}" />
					</p:column>

					<f:facet id="footer" name="footer">
					</f:facet>
				</p:dataTable>

				<p:panel id="dataFile">
					<h:outputText value="#{asynch.documentName}" styleClass="display"></h:outputText>
					<p:panel id="archivoOriginal" header="Archivo Original">
						<p:outputLabel id="originalDataLabel"
							binding="#{asynch.originalDataLabel}"
							value="#{asynch.documentData}" styleClass="display"></p:outputLabel>
					</p:panel>
					<p:panel header="Archivo Normalizado">
						<p:outputLabel id="cleanDataLabel"
							binding="#{asynch.cleanDataLabel}" value="#{asynch.cleanData}"
							styleClass="display"></p:outputLabel>
						<p:separator></p:separator>
						<p:commandButton value="Normalizar"
							actionListener="#{documents.normalize}" update=":#{p:component('dataFile')}"></p:commandButton>
					</p:panel>
				</p:panel>
			</p:panelGrid>
		</h:form>
		<p:outputLabel styleClass="display"></p:outputLabel>
	</p:panel>
	<script>
	function handleMessage1(data) {
		facesmessage.severity = 'info';
		growl.show([data]);
		//$('.display').html(data);
		//alert("Test");
	}
	</script>
	<p:socket onMessage="handleMessage1" channel="/document" >
		<p:ajax event="message" update=":#{p:component('dataFile')}"/>
	</p:socket>
	
</ui:composition>